<template>
     <div id="div">
        <el-row :gutter="6" >
            <el-col :span="2"><div class="grid-content bg-purple"> <div class="content-header common-search-border1" style="margin : 10px">
                <el-button type="primary" class="butAdd" @click="getUserListAdmin" > 管理员
                </el-button>
            </div></div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"> <div class="content-header common-search-border1" style="margin : 10px">
                <el-button type="primary" class="butAdd" @click="getUserListMember" > 会&nbsp&nbsp&nbsp&nbsp员
                </el-button>
            </div></div></el-col>
            <el-col :span="2"><div class="grid-content bg-purple"> <div class="content-header common-search-border1" style="margin : 10px">
                <el-button type="primary" class="butAdd" @click="getUserListVisitor" > 游&nbsp&nbsp&nbsp&nbsp客
                </el-button>
            </div></div></el-col>
           
        </el-row>
            
    

        <div class="app-container">
            <!-- <div class="box common-search-border2">
                <div class="filter-container">
                
                    <el-form :inline="true" :model="queryParams" ref="queryParams"
                             class="formInfo">
                        <el-form-item label="用户名称" label-width="80px">
                            <el-input placeholder="请输入" v-model="queryParams.username"
                                      style="width: 200px;" class="filter-item"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest">清除</el-button>
                            <el-button type="primary" class="butOK" @click="handleSearch">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div> -->
            <div class="box common-table-border" style="margin:8px 0 0;">
                <!--
                    TODO: 用户列表
                -->
                <!--
                    data	显示的数据
                    fit	列的宽度是否自撑开
                -->
                <el-table
                        :data="userList"
                        fit
                        style="width: 100%;">

                    <el-table-column label="编号" width="50px" align="center" prop="id">
                    </el-table-column>
                    <el-table-column label="用户名" align="center" prop="username">
                    </el-table-column>
                    <el-table-column label="邮箱" align="center"  prop="email">
                    </el-table-column>
                    <el-table-column label="创建日期" align="center" prop="createTime">
                    </el-table-column>
                    <el-table-column label="修改日期" align="center" prop="updateTime">
                    </el-table-column>

                    <el-table-column
                            label="角色"
                            width="120"
                            align="center">
                        <!--
                           slot-scope = "scope"
                               用于指定当前的数据(本案例是userList中的当前行元素)
                       -->
                        <template slot-scope="scope">
                            <!--
                                如果要将页面1 test.vue的作为独立的组件应用在另一个页面上2上，
                                并需要以弹框形式打开，可在页面2上直接引入，在页面2中使用el-popover组件，将其插入：
                                悬浮提示信息展示框
                                    trigger = "hover" 鼠标移上去触发
                                    placement="left" 悬浮框显示位置在左边

                            -->
                            <el-popover v-for="role in scope.row.roles" trigger="hover" placement="left">
                                <!-- 前两个p标签是提示信息, div标签是展示信息 -->
                                <p style="font-size: 10px;color: blue">角色编号: {{ role.id }}</p>
                                <p style="font-size: 10px;color: blue">角色描述: {{ role.description }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag size="medium">{{ role.name }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    

                </el-table>
  <!--
                     TODO: 分页组件
                       @size-change： 当改变每页条数时触发的函数
                       @current-change：当改变页码时触发的函数
                       current-page ：默认的页码
                       :page-sizes：每页条数选择框中显示的值
                       :page-size : 默认的每页条数
                       layout： 分页组件的布局
                           total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
                       :total: 总条数
                 -->
                <div class="pagination-container">
                    <el-pagination
                            class="pagiantion"
                            v-show="pagination.total>0"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pagination.pageNum"
                            :page-sizes="[2,3, 4, 5]"
                            :page-size="pagination.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pagination.total">
                    </el-pagination>
                </div>
            </div>

            <!-- end -->
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            pagination: {
                total: 0,  //总条数
                pageNum: 1, // //当前页
                pageSize: 5 //每页显示条数
            },
            userList: [],  //用户列表数据
            roleList: [], // 角色列表数据
            queryParams: { // 搜索条件
                role:''
            },
            dialogFormVisible: false, // 添加窗口显示状态
            dialogUptFormVisible: false,//修改窗口显示状态
            addUser: { // 用户数据
                username: '',
                email: '',
                password: '',
                remark: '',
                roleIds: []
            },
            updateUser: { //用户的修改数据
                id: "",
                username: '',
                email: '',
                password: '',
                roleIds: []
            },
            rules: { //校验规则
                username: [
                    {required: true, message: '请填写', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请填写', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ],
                password: [
                    {required: true, message: '请填写', trigger: 'blur'}
                ]
            }

        }
    },
    created() {
            //分页查询用户列表
            this.getUserListAdmin()
            //查询所有的角色 TODO ?
            //  (添加用户和修改用户的时候要展示所有角色以供选择)
            this.getRoleList()
        },
        methods: {
            getUserListAdmin(){
                this.queryParams.role = '1';
                this.getUserList();
            },
            getUserListMember(){
                this.queryParams.role = '2';
                this.getUserList();
            },
            getUserListVisitor(){
                this.queryParams.role = '3';
                this.getUserList();
            },
            getUserList() {
                
                let url = "/user/selectUser";
                let param = {
                     // 当前页码
                    currentPage : this.pagination.pageNum,
                    //每页显示数据的条数
                    pageSize : this.pagination.pageSize,
                    // //条件
                    queryParams : this.queryParams

                };
                axios.post(url,param)
                    .then(resp=>{
                        let obj = resp.data;
                        if (obj.flag) {
                
                            this.$notify({
                                    title: obj.message,
                                    message: '你特么真牛逼啊',
                                    position: 'bottom-left'
                                    });
                            this.userList = obj.result.rows;
                            this.pagination.total = obj.result.total;
                        } else {
              
                            this.$notify({
                                    title: obj.message,
                                    message: '那你呢 除了知道我是宇宙最强最潮流最帅最牛超级无敌邪魅嗜血究极狂暴螺旋升天帅暗影少帅 你又了解我多少',
                                    position: 'bottom-left'
                                    });
                        }
                    })
            },

           
            //TODO: 查询角色表
            getRoleList() {
                let url = "/role/queryAllRoles";
                axios.post(url)
                    .then(resp=>{
                          if(resp.data.flag){
                            this.roleList=resp.data.result;
                        }
                    });


            },
    
       
            //每页数量改变的时候
            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.pagination.pageNum = 1;
                this.getUserList();
            },
            //当前页码改变的时候
            handleCurrentChange(val) {
                this.pagination.pageNum = val;
                this.getUserList();
            },
      
            //修改用户 数据回显
            handleUpdate(row) {//row=scope.row,表示当前行对象
                var t = this;
                if (t.$refs['uptForm']) {
                    t.$refs['uptForm'].resetFields();
                }
                //当前行对象的id值(row.id)赋值给vue中data中的updateUser中的id
                t.updateUser.id = row.id;
                t.updateUser.username = row.username;
                t.updateUser.password = row.password;
                t.updateUser.email = row.email;

                //遍历取出此用户所有的角色id
                let roleIds = [];
                 /*
                    1.一个用户有多个角色，我们在查询用户的时候，用户对象中会保存多个角色的容器roles
                        row表示当前行：
                        row.roles 表示获取当前行的所有角色对象
                        王五用户扮演的角色：roles=[{id:1,name:管理员},{id:2,name:会员},{id:3,name:游客}]
                */
                for(let i=0;i< row.roles.length; i++){
                    //row.roles[i].id 获取每个角色的id
                    //roleIds[i]存储当前用户的角色id
                    //举例：roleIds = [1,2,3]
                    roleIds[i] = row.roles[i].id;
                }
                 //将当前用户的角色id数组赋值给updateUser中的roleIds
                t.updateUser.roleIds = roleIds;
                // dialogUptFormVisible: false,//修改窗口显示状态 默认值是false表示隐藏弹出框，值是true表示显示弹出框
                t.dialogUptFormVisible = true;

            },
          
        }
}
</script>
<style>

</style>